<template>
	<view class="page" :style="`background: url(${$util.prefix('game/game_bg.png')}) 0 0 no-repeat;`">
		<!-- 导航 -->
		<view class="naver flex_r_between">
			<view class="icon" @click="$refs.rich.open()">
				<image :src="$util.prefix('game/game_nav_rich_icon.png')" mode="aspectFill"></image>
			</view>

			<view class="title">
				<image :src="$util.prefix('game/game_nav_title.png')" mode="aspectFill"></image>
			</view>

			<view class="icon" @click="$native.backAction()">
				<image :src="$util.prefix('game/game_nav_close_icon.png')" mode="aspectFill"></image>
			</view>
		</view>

		<!-- 底部文字 -->
		<view class="footer">
			适度娱乐 理性消费
		</view>

		<!-- boss 进场倒计时 -->
		<view class="countdown flex_c">
			<view class="progress">
				<view :style="`width: ${time_progress}rpx;`">

				</view>
			</view>
			<view class="text flex_center" v-if="!show_notification && !show_notification_text">
				<text>茶会倒计时</text>
				<u-count-down ref="countDown" :millisecond="false" :time="time * 1000" format="ss"
					@change="onTimeChange" @finish="onTimeFinish"></u-count-down>
				<text>s</text>
			</view>
			<view class="text flex_center" v-if="show_notification || show_notification_text">
				<text>动物进场中</text>
			</view>

		</view>

		<!-- 买菜 -->
		<blanceVue ref="blance" @refresh="refresh"></blanceVue>

		<!-- 菜品列表 -->
		<view class="vegetable">
			<view class="item suspension" v-for="(item,index) in 8" :key="index" :id="`item${index + 1}`"
				@click="onChoose(index+1)">
				<view class="showdown" v-if="getStatus(index) > 0">

				</view>
				<image :src="$util.prefix(`game/gift_image${index + 1}.png`)" mode="aspectFill"></image>
				<!-- 1=树叶，2=玉米，3=香蕉，4=肉块，5=胡萝卜，6=竹子，7=苹果，8=火腿 -->
				<view class="item_text flex_r_around">
					<text class="hidden" v-if="!getStatus(index)">{{
						index == 0 ? '树叶'
						: index == 1 ? '玉米'
						: index == 2 ? '香蕉'
						: index == 3 ? '肉块'
						: index == 4 ? '萝卜'
						: index == 5 ? '竹子'
						: index == 6 ? '苹果'
						: index == 7 ? '火腿'
						: ''
					}}</text>

					<text class="hidden" v-else>{{ getStatus(index) }}</text>
				</view>


			</view>
		</view>

		<!-- 动物 -->
		<view v-if="show_notification" class="animal" id="animal-move">
			<image :src="$util.prefix(`game/boss${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-if="old_boss_res == 1"></image>
			<image :src="$util.prefix(`game/elephant${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 1"></image>
			<image :src="$util.prefix(`game/raccoon${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 2"></image>
			<image :src="$util.prefix(`game/monkey${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 3">
			</image>
			<image :src="$util.prefix(`game/lion${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 4">
			</image>
			<image :src="$util.prefix(`game/rabbit${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 5">
			</image>
			<image :src="$util.prefix(`game/panda${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 6">
			</image>
			<image :src="$util.prefix(`game/fox${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 7">
			</image>
			<image :src="$util.prefix(`game/tiger${walking ? 2 : 1}.png`)" mode="aspectFill"
				v-else-if="old_prize_res == 8">
			</image>
		</view>

		<notificationVue :show="show_notification_flag"></notificationVue>

		<!-- 规则说明弹窗 -->
		<uni-popup ref="rich" type="center">
			<richVue></richVue>
		</uni-popup>

		<!-- 下注 -->
		<uni-popup ref="bettingModal" type="center">
			<bettingVue @onBetting="onBetting" ref="betting" :index="index" :to_uid="`${to_uid}`" :rid="rid"
				:task_id="now_task_id" :time="now_time" :have_leaf_num="have_leaf_num"></bettingVue>
		</uni-popup>

		<!-- 主播选择  2025.05.22 运营（戴眼镜）说直接放到自己背包 跟老板说过了 -->
		<!-- <peopleVue :to_uids="to_uids" @getPeopleSelect="getPeopleSelect"></peopleVue> -->

		<!-- 消费记录+茶会记录 -->
		<recordVue></recordVue>

		<!-- 首次启动加载动画 -->
		<view class="loading flex_c" v-if="!loaded">
			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

		<bossVue :boss_run_percent="boss_run_percent"></bossVue>

		<!-- 中奖弹窗 -->
		<uni-popup ref="success" type="center">
			<successVue :old_prize_list="old_prize_list" @closeSuccessModel="closeSuccessModel"></successVue>
		</uni-popup>

	</view>
</template>

<script>
	import notificationVue from './components/notification/notification.vue';
	import recordVue from './components/record/record.vue';
	import richVue from './components/rich/rich.vue';
	import peopleVue from './components/people/people.vue';
	import blanceVue from './components/blance/blance.vue';
	import bettingVue from './components/betting/betting.vue';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import bossVue from './components/boss/boss.vue';
	import successVue from './components/success/success.vue';
	export default {
		components: {
			notificationVue,
			recordVue,
			richVue,
			peopleVue,
			blanceVue,
			bettingVue,
			ProgressBar,
			bossVue,
			successVue,
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},
		data() {
			return {

				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,
				load_image: [
					'https://qiniu-cdn.maeiyun.com//h5static/game/betting_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/betting_btn_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/buy_add_icon.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/buy_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/buy_btn.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/buy_grass_icon.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/elephant1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/elephant2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/fox1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/fox2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/game_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/game_nav_close_icon.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/game_nav_rich_icon.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/game_nav_title.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image3.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image4.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image5.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image6.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image7.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/gift_image8.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/lion1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/lion2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/monkey1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/monkey2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/notification-bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/panda1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/panda2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/platform_records_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/rabbit1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/rabbit2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/raccoon1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/raccoon2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/rich_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/tag_bottom.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/tag_top.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/tiger1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/tiger2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/game/empty.png',
				],

				show_notification: false,

				time: 30,
				time_progress: 0,

				timer: null,

				walking: false,

				task_id: 1,

				index: 0,

				to_uids: '1,44,339,1119',

				to_uid: 0,

				now_task_id: 0,
				old_prize_res: 0,

				rid: 0,

				now_time: 30,

				have_leaf_num: 0,

				show_notification_flag: false,

				nowPrizeLog: [],

				get_num: 0,

				show_notification_text: false,

				old_prize_list: [],

				boss_run_percent: 0,

				old_boss_res: 0,

			}
		},
		methods: {
			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						// 加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}
			},

			onTimeChange(e) {
				this.now_time = e.seconds;
				if (e.seconds < 30) {
					this.time_progress = (30 - e.seconds) / 30 * 184;
				} else {
					this.time_progress = 0;
				}
			},

			onTimeFinish(e) {
				this.get_num++;
				this.$get('/active.animalPrize/getInitInfo', {
					task_id: this.now_task_id
				}).then(res => {
					this.old_prize_res = res.data.old_prize_res;
					this.old_boss_res = res.data.old_boss_res;


					if (this.old_prize_res && this.old_prize_res > 0) {
						this.old_prize_list = res.data.old_prize_list;
						this.show_notification_flag = true;
						this.get_num = 0;
						setTimeout(() => {
							this.show_notification_flag = false;
							this.show_notification = true;
							this.timer = setInterval(() => {
								this.walking = !this.walking;
							}, 300);
							setTimeout(() => {
								if(res.data.old_prize_status != 0){
									this.$refs.success.open();
								}
								this.show_notification = false;

								// this.time = res.data.now_left_time;
								this.now_task_id = res.data.now_task_id;
								// this.$refs.countDown.reset();

								this.getInitInfo();

								clearInterval(this.timer);
								this.timer = null;
							}, 6000);

						}, 2000);
					} else {
						if (this.get_num > 10) {
							return;
						}
						setTimeout(() => {
							this.onTimeFinish();
						}, 1000)
					}


				});

			},

			getInitInfo(refresh = false) {
				this.$get('/active.animalPrize/getInitInfo', {
					task_id: this.now_task_id
				}).then(res => {

					if (res.status == 0) {
						return this.$util.msg('活动未开启');
					}

					if (res.data.now_left_time <= 30) {
						this.time = res.data.now_left_time;
						this.have_leaf_num = res.data.have_leaf_num;
						this.$refs.blance.have_leaf_num = res.data.have_leaf_num;
						this.$refs.blance.level_config_id = res.data.level_config_id;
						this.$refs.blance.sing_leaf_price = res.data.sing_leaf_price;
						this.$refs.blance.level_img = res.data.level_img;
						this.now_task_id = res.data.now_task_id;
						this.boss_run_percent = res.data.boss_run_percent;
						this.getNowPrizeLog();
						this.$refs.countDown.reset();
					} else {
						var d_time = res.data.now_left_time - 30;
						this.show_notification_text = true;
						setTimeout(() => {
							this.show_notification_text = false;
							this.time = 30;
							this.have_leaf_num = res.data.have_leaf_num;
							this.$refs.blance.have_leaf_num = res.data.have_leaf_num;
							this.$refs.blance.level_config_id = res.data.level_config_id;
							this.$refs.blance.sing_leaf_price = res.data.sing_leaf_price;
							this.$refs.blance.level_img = res.data.level_img;
							this.now_task_id = res.data.now_task_id;
							this.boss_run_percent = res.data.boss_run_percent;
							this.getNowPrizeLog();
							this.$nextTick(() => {
								this.$refs.countDown.reset();
							});
						}, d_time * 1000)
					}



				});
			},

			refresh() {
				this.getInitInfo();
				this.$refs.blance.getBlance();
			},

			onChoose(index) {
				this.index = index;
				this.$refs.bettingModal.open();
			},

			getPeopleSelect(to_uid) {
				this.to_uid = to_uid;
			},

			onBetting() {
				this.$util.msg('购买成功');
				this.$refs.bettingModal.close();
				this.getInitInfo()
			},

			getNowPrizeLog() {
				this.now_task_id
				this.$get('/active.animalPrize/getNowPrizeLog', {
					task_id: this.now_task_id
				}).then(res => {
					if (Array.isArray(res.data)) {
						this.nowPrizeLog = res.data;
					} else {
						this.nowPrizeLog = [];
					}
				});
			},

			getStatus(index) {
				var id = index + 1;
				var goods_index = this.nowPrizeLog.findIndex((item) => item.order_food == id);
				if (goods_index > -1) {
					return this.nowPrizeLog[goods_index].order_num;
				} else {
					return '';
				}
			},

			closeSuccessModel() {
				this.$refs.success.close();
			}

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.rid = option.rid;
			this.preLoad();
			this.getInitInfo();
		}
	}
</script>

<style lang="less" scoped>
	@import url("./components/style.css");

	.loading {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #FFF;
		padding-top: 20vh;
	}

	page {
		background: url('https://qiniu-cdn.maeiyun.com//h5static/game/game_bg.png') 0 0 no-repeat;
		background-size: 100%;
		background-color: #507336;
	}

	.page {
		height: 984rpx;
		width: 750rpx;
		background-size: 100% !important;
		padding-top: 112rpx;
		position: relative;
	}

	.naver {
		width: 100vw;
		height: 108rpx;
		background: rgba(228, 255, 173, 0.3);
		backdrop-filter: blur(3px);
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 24rpx;
		z-index: 1;

		.icon {
			width: 56rpx;
			height: 56rpx;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.title {
			width: 400rpx;
			height: 112rpx;

			image {
				width: 400rpx;
				height: 112rpx;
			}
		}
	}

	.footer {
		width: 100vw;
		height: 48rpx;
		background: rgba(228, 255, 173, 0.5);
		backdrop-filter: blur(3px);
		font-weight: 600;
		font-size: 24rpx;
		color: #507336;
		line-height: 48rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.countdown {
		margin-top: 40rpx;

		.progress {
			width: 184rpx;
			height: 19rpx;
			background: #F4F7BB;
			border-radius: 12rpx;

			view {
				width: 100rpx;
				height: 19rpx;
				background: #8D440E;
				border-radius: 12rpx;
				transition: 1s;
			}
		}

		.text {
			font-size: 24rpx;
			color: #893E07;
			font-weight: 600;

			/deep/ text {
				font-size: 24rpx;
				color: #893E07;
				font-weight: 600;
			}
		}
	}

	.vegetable {

		.showdown {
			position: absolute;
			width: 88rpx;
			height: 100%;
			background: #FD2A53;
			filter: blur(20rpx);
		}

		.item {
			position: absolute;
			z-index: 2;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.item_text {
				width: 88rpx;
				height: 40rpx;
				background: #83C33E;
				border-radius: 20rpx;
				border: 2rpx solid #FEF7B4;
				margin-top: -30rpx;
				position: relative;
				z-index: 2;

				text {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}

		#item1 {
			bottom: 336rpx;
			left: 146rpx;

			image {
				transform: scale(0.8);
			}

			.item_text {
				transform: scale(0.8);
			}
		}

		#item2 {
			bottom: 344rpx;
			right: 288rpx;

			image {
				transform: scale(0.8);
			}

			.item_text {
				transform: scale(0.8);
			}
		}

		#item3 {
			bottom: 256rpx;
			left: 224rpx;

			image {
				transform: scale(0.9);
			}

			.item_text {
				transform: scale(0.9);
			}
		}

		#item4 {
			bottom: 266rpx;
			right: 222rpx;

			image {
				transform: scale(0.9);
			}

			.item_text {
				transform: scale(0.9);
			}
		}

		#item5 {
			bottom: 180rpx;
			left: 174rpx;

			image {
				transform: scale(1);
			}

			.item_text {
				transform: scale(1);
			}
		}

		#item6 {
			bottom: 172rpx;
			right: 190rpx;

			image {
				transform: scale(1);
			}

			.item_text {
				transform: scale(1);
			}
		}

		#item7 {
			bottom: 70rpx;
			left: 132rpx;

			image {
				transform: scale(1.1);
			}

			.item_text {
				transform: scale(1.1);
			}
		}

		#item8 {
			bottom: 98rpx;
			right: 122rpx;

			image {
				transform: scale(1.1);
			}

			.item_text {
				transform: scale(1.1);
			}
		}
	}

	.animal {
		width: 97rpx;
		height: 126rpx;
		position: absolute;
		left: 310rpx;
		bottom: 384rpx;
		z-index: 3;

		image {
			width: 97rpx;
			height: 126rpx;
		}
	}
</style>